<template>
  <view class="service-time-selector">
    <view class="service-time-selector__item" @click="showPicker">
      <view class="service-time-selector__left">
        <text class="service-time-selector__label">时间</text>
        <text 
          class="service-time-selector__value" 
          :class="{'service-time-selector__placeholder': !selectedTime}"
        >
          {{ selectedTime ? selectedTime : '请选择' }}
        </text>
      </view>
      <view class="service-time-selector__right">
        <view class="service-time-selector__icon">
          <text class="service-time-selector__arrow">›</text>
        </view>
      </view>
    </view>
    
    <custom-popup 
      :show="isPickerVisible" 
      :title="'选择预约时间'" 
      @close="closePicker"
      @confirm="confirmTime"
    >
      <picker-view
        :indicator-style="'height: 44px;'"
        :value="pickerValue"
        class="time-picker"
        @change="onPickerChange"
      >
        <picker-view-column>
          <view class="picker-item" v-for="(date, index) in dateArray" :key="index">{{ date }}</view>
        </picker-view-column>
        <picker-view-column>
          <view class="picker-item" v-for="(time, index) in timeArray" :key="index">{{ time }}</view>
        </picker-view-column>
      </picker-view>
    </custom-popup>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import CustomPopup from '../common/CustomPopup.vue';

const props = defineProps({
  selectedTime: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['time-select']);

// 时间选择相关
const dateArray = [
  '今天',
  '明天',
  '后天',
  '大后天'
];

const timeArray = [
  '08:00',
  '09:00',
  '10:00',
  '11:00',
  '12:00',
  '13:00',
  '14:00',
  '15:00',
  '16:00',
  '17:00',
  '18:00',
  '19:00',
  '20:00'
];

// 选择的时间索引
const pickerValue = ref([0, 0]);
const isPickerVisible = ref(false);

// 显示时间选择器
const showPicker = () => {
  isPickerVisible.value = true;
};

// 关闭时间选择器
const closePicker = () => {
  isPickerVisible.value = false;
};

// 时间选择器变化
const onPickerChange = (e) => {
  pickerValue.value = e.detail.value;
};

// 确认时间选择
const confirmTime = () => {
  const selectedDate = dateArray[pickerValue.value[0]];
  const selectedTime = timeArray[pickerValue.value[1]];
  const fullTime = `${selectedDate} ${selectedTime}`;
  
  emit('time-select', fullTime);
  closePicker();
};
</script>

<style lang="scss" scoped>
.service-time-selector {
  background-color: #fff;
  padding: 0 20px;
  margin-bottom: 12px;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  
  &__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid #f5f5f5;
  }
  
  &__item:last-child {
    border-bottom: none;
  }
  
  &__left {
    display: flex;
    align-items: center;
  }
  
  &__label {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    margin-right: 20px;
    min-width: 40px;
  }
  
  &__value {
    font-size: 15px;
    color: #333;
  }
  
  &__placeholder {
    color: #999;
  }
  
  &__right {
    display: flex;
    align-items: center;
  }
  
  &__icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  &__arrow {
    font-size: 20px;
    color: #999;
    font-weight: 300;
  }
}

.time-picker {
  width: 100%;
  height: 220px;
}

.picker-item {
  height: 44px;
  line-height: 44px;
  text-align: center;
}
</style>
